<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style type="text/css">
            .pre-loader {
                position:fixed;
                top:0;
                bottom:0;
                width:100%;
                z-index:1999;
                background:#111111;
            }
        </style>
        
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
        
        <link rel="stylesheet" href="css/normalize.css">
        <!--<link href="css/jquery.fullPage.css" rel="stylesheet" type="text/css"/>-->
        <link href="css/bigvideo.css" rel="stylesheet" type="text/css"/>
        <link href="css/animate.css" rel="stylesheet" type="text/css"/>
        <link href="css/pace-styles.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <script src="js/plugins.js" type="text/javascript"></script>
        
        <!-- CONTENT -->
  
        <div class="pre-loader"></div>
        
        
        <div class="full-page-wrap">
        

                <div class="header-wrapper" id="hero">
                    <!--<img src="img/logo-main.svg" alt="logo" class="main-logo show fadeInDown" /> -->
                    <!-- <a href="#intro" class="down-arrow">
                        <img src="img/down-arrow.svg" alt="down arrow" class="show fadeInUp" /> 
                    </a> -->
                    
                    <h1 class="big-text" data-0="opacity:1; top:27%;" data-600="opacity:0; top:35%;">Richard<br>Franklin</h1>
                    
                    <p class="hero-intro" data-0="opacity:1; top:57%;" data-600="opacity:0; top:65%;">
                        Hello. thanks for taking a look at my portfolio. I'm a Web Designer & Front End Developer living in Bedfordshire,&nbsp;England.<br>Find out more&nbsp;about&nbsp;me <a href="#intro">below</a>.
                    </p>
                    
                    <div class="video-wrapper">
                        
                        <div class="hero-triangle show slideInRight">
                            <img src="img/hero-triangle.png" class="triangle" alt="triangle" />
                        </div>
                    </div>
                    
                </div>
                <div class="header-spacer"></div>

            
            
            
            <div class="full-width-container navbar">
                <div class="inner-container">
                    
                    <a href="#hero" class="home-link">
                        <img src="img/logo-main-small.svg" alt="home">
                    </a>
                    
                    <ul>
                        <li><a href="#intro">About Me</a></li>
                        <li><a href="#my-skills">My Skills</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#clients">Clients</a></li>
                        <li><a href="#contact">Contact Me</a></li>
                    </ul>
                </div>
            </div>

            <div class="full-width-container intro" id="intro">
                <div class="inner-container show fadeInUp" data-wow-delay="0.25s">
                    <h2><span>About me...</span></h2>
                    <p>I'm a Web Designer & Front End Developer living in Bedfordshire, UK. After graduating with 1<sup>st</sup> class honours from the University of Kent studying Multimedia Technology &amp; Design, 
                    my passion for inspirational design and solid, yet creative front-end development has lead me to work with dozens of large, international clients at various agencies, gaining invaluable experience along the way.</p>
                </div>
            </div>
            
            
            <div class="full-width-container my-skills" id="my-skills">

                    <div class="col-6 left show fadeInLeft" data-wow-delay="0.25s">
                        <div class="icon-container">
                            <span class="icon-icon-coding"></span>
                        </div>

                        <h3>Development</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                
                    <div class="col-6 right show fadeInRight" data-wow-delay="0.25s">

                        <div class="icon-container">
                            <span class="icon-icon-responsive"></span>
                        </div>

                        <h3>Design</h3>
                        <p>
                            <!--I design responsive websites, apps, emails and anything in between, with over a decade of Adobe Creative Suite experience. -->
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>
                    <!--<div class="col-3">
                        <img src="img/icon-interests.svg" alt="Development"/>
                        <h3>Interests</h3>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    </div>-->
                    <div class="clearfix"></div>


            </div>
                
            <div class="full-width-container standard-padding show fadeInUp" id="my-work">
                <div class="inner-container">
                    <h2>My Work</h2>
                    <p class="title-subtext">Below are a few private projects. Most of my work has been achieved with trusted agencies, but please <a href="#contact-me">get in touch</a> if you would like more information.</p>
                    <hr class="thin-divider" />
                    
                    <div class="work-links">
                        <a href="#" class="link-box">
                            <img src="img/example-littlesteps.jpg" alt="bear" />
                        </a>

                        <a href="#" class="link-box">
                            <img src="img/example-bear.jpg" alt="bear" />
                        </a>
                        
                        <a href="#" class="link-box">
                            <img src="img/example-littlesteps.jpg" alt="bear" />
                        </a>
                        
                        <a href="#" class="link-box">
                            <img src="img/example-bear.jpg" alt="bear" />
                        </a>
                    </div>
                    
                    
                </div>
            </div>

            <div class="full-width-container worked-with standard-padding" id="clients">
                <div class="inner-container">

                    <h2><span>A selection of the...</span>Clients I've worked with</h2>

                    <hr class="thin-divider white" />



                    <div class="logo-row">
                        <div class="company-logo">
                            <img src="img/logos/logo-1.png" alt=""/>
                        </div>
                        <div class="company-logo">
                            <img src="img/logos/logo-2.png" alt=""/>
                        </div>
                        <div class="company-logo">
                            <img src="img/logos/logo-3.png" alt=""/>
                        </div>
                        <div class="company-logo">
                            <img src="img/logos/logo-4.png" alt=""/>
                        </div>
                        <div class="company-logo">
                            <img src="img/logos/logo-5.png" alt=""/>
                        </div>
                    </div>

                    <div class="logo-row">
                        <div class="company-logo">
                            <img src="img/logos/logo-1.png" alt=""/>
                        </div>
                        <div class="company-logo">
                            <img src="img/logos/logo-2.png" alt=""/>
                        </div>
                        <div class="company-logo">
                            <img src="img/logos/logo-3.png" alt=""/>
                        </div>
                        <div class="company-logo">
                            <img src="img/logos/logo-4.png" alt=""/>
                        </div>
                        <div class="company-logo">
                            <img src="img/logos/logo-5.png" alt=""/>
                        </div>
                    </div>



                </div>
            </div>

        </div>
        
        
        <!-- /CONTENT -->
        
        <!-- Scripts -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
        
        <script src="js/vendor/pace.min.js" type="text/javascript"></script>
        <script src="js/vendor/jquery.slimscroll.min.js" type="text/javascript"></script>
        <!--<script src="js/vendor/jquery.fullPage.js" type="text/javascript"></script>-->
        <script src="js/vendor/video.js" type="text/javascript"></script>
        <script src="js/vendor/particles.min.js" type="text/javascript"></script>
        <!--<script src="js/vendor/imagesloaded.js" type="text/javascript"></script>-->
        <script src="js/vendor/bigvideo.js" type="text/javascript"></script>
        
        <script src="js/vendor/skrollr.js" type="text/javascript"></script>
        
        <!--<script src="js/vendor/jquery.tubular.1.0.js" type="text/javascript"></script>-->
        
        <script src="js/vendor/jquery.sticky.js" type="text/javascript"></script>
        
        <script src="js/vendor/wow.min.js" type="text/javascript"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
  
        <script>
            
            $(document).ready(function() {
                /*$('#fullpage').fullpage({
                    navigation: true,
                    afterResize: function(){
                        fullScreenResize();
                    },
                    scrollOverflow: true
                });*/
        
                
               //var options = { videoId: 'e4Is32W-ppk', start: 3 };
                //$('.header-wrapper').tubular(options);
                //
                // f-UGhWj1xww cool sepia hd
                // 49SKbS7Xwf4 beautiful barn sepia
                
                $('.navbar').sticky({topSpacing:0});


                var skrollrinit = skrollr.init();

        
            });
   


            $(function() {
                var BV = new $.BigVideo({container: $('.video-wrapper')});
                BV.init();
                if (!Modernizr.touch) {
                    BV.show('video/ocean.mp4', {ambient:true});
                }
                BV.getPlayer().on('durationchange',function(){
                    $('#big-video-wrap').fadeIn();
                });
            });
            
            $(window).load(function(){
                  $('.pre-loader').fadeOut(400);
            
            });

        </script>
        
        <script>
            new WOW({boxClass:'show'}).init();
        </script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-41046671-1','auto');ga('send','pageview');
        </script>
    </body>
</html>
